<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>小薇学院任务六</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="index.js"></script>
	</head>
	<body>
		<header>
			<div class="logo"><span>ife.baidu.com</span></div>
			<span>2016.03</span>
		</header>
		<div class="clearfix container1">
			<div id="pc-img">
				<div class="over-left over-img"></div>
				<div class="over-right over-img"></div>
			</div>
			<div class="about">
				<p>about</p>
				<p>techology</p>
				<span class="copy">About techology about techology</span>
				<span id="bignumber">700</span>
				<div class="nums">
					<span id="smallnum">3.2</span>
					<div id="smaller">css</div>
					<div id="smallest">sscscscssssscc</div>
				</div>
			</div>
		</div>
		<article class="clearfix container2">
			<section class="what">
				<header>what</header>
				<span>百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台</span>
			</section>
			<section class="when">
				<header>when</header>
				<span>百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台</span>
			</section>
			<section class="how">
				<header>how</header>
				<span>百度前端</span><br />
				<span>百度前端技术学院</span><br />
				<span>百度</span><br />
				<section class="catalog">
					<span>What--------<span>40%</span></span><br />
					<span>What--------<span>40%</span></span><br />
					<span>What--------<span>40%</span></span>
				</section>
			</section>
		</article>
		<div class="clearfix container3">
			<article class="left">
				<header>
					<hgroup>
						<h1><span class="first-en-word">the</span> techology<br />of front</h1>
						<h2>前端技术领域</h2>
					</hgroup>
				</header>
				<article>
					<div class="pc-img2">
						<img src="img/task06_左下.jpg" />
					</div>
					<span><span class="first-ch-word">前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</span>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前</p>
				</article>
			</article>
			<div class="right">
				<div class="right-img">
					<footer>
						<div class="img-header">前端技术</div><span class="img-hd">前端技术前端技术</span>
					</footer>
				</div>
				<div class="right-note">
					<div class="list">
						<ol>
							<li>前端前端前端前端....................<span>前端</span></li>
							<li>前端...............................<span>前端前</span></li>
							<li>前端前端前端前端前端................<span>前端</span></li>
						</ol>
					</div>
					<div class="zero-container">
						<span class="zero">0</span>
						<div class="zero-right">
							<h4>one two</h4>
							<h4>three four five</h4>
							<span>hello world hello world hello world</span>
						</div>
					</div>
					<div class="hello">
						<img src="img/db-dot-left.jpg" />
						hello world hello world hello world hello world hello world hello world hello world hello world hello world
						<img src="img/db-dot-right.jpg" />
					</div>
				</div>
			</div>
		</div>
		<footer>
			<section>2017.03</section>
		</footer>
	</body>
</html>